<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" size="small" :inline="true">
      <el-form-item label="车辆ID" prop="carId">
        <el-input v-model="queryParams.carId" placeholder="请输入车辆ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="vehicleFeedback">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="车辆ID" align="center" key="carId" prop="carId" />
      <el-table-column label="新消息发送方" align="center" key="sender" prop="sender">
        <template #default="{ row }">
          <el-tag v-if="row.sender === 'client'">客户</el-tag>
          <el-tag v-if="row.sender === 'merchant'">商家</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最新消息" align="center" key="content" prop="content" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="未读消息个数" align="center" key="unreadMsgCount" prop="unreadMsgCount"
        :show-overflow-tooltip="true">
        <template #default="{ row }">
          <div v-if="row.unreadMsgCount > 0" class="unread-badge">
            <!-- 显示未读消息个数，使用红色圆圈标识 -->
            {{ row.unreadMsgCount }}
          </div>
          <el-tag v-if="row.unreadMsgCount <= 0" type="success">已回复</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="发送消息时间" align="center" key="createTime" prop="createTime" />
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-search" @click="openChat(scope.row)">打开新窗口回复</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">永久删除聊天记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" center width="900px">
      <ChatInterface :carId="currentCarId" @transfer="trundialogFormVisible()"></ChatInterface>
    </el-dialog>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import ChatInterface from "@/views/saleManagement/message/components/ChatInterface"
import service from '@/api/saleManagement/message'
/*售后管理*/
export default {
  name: "LeaveMessage",
  components: {
    ChatInterface
  },
  data() {
    return {
      //加载状态
      loading: false,
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        carId: '',
        pageNum: 1,
        pageSize: 10
      },
      //车辆反馈数据
      vehicleFeedback: [],
      total: 0,
      dialogFormVisible: false,
      title: '',
      //当前点击的车辆ID
      currentCarId: ''
    }
  },

  created() {
    this.getFeedBackCount()
    this.getList()
  },
  methods: {
    trundialogFormVisible(cs) {
      //刷新页面跟新阅读状态
      this.getList()
      this.dialogFormVisible = cs
      this.currentCarId = ''
    },
    async getFeedBackCount() {
      let { data } = await service.getFeedBackCount()
      this.total = data;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        carId: '',
        pageNum: 1,
        pageSize: 10
      }
      this.resetForm("queryForm");
      this.handleQuery();
    },
    async getList() {
      //发请求加载车辆反馈信息，mock
      let { data } = await service.getFeedBackList(this.queryParams)
      this.vehicleFeedback = data;
    },
    /**
     * 打开聊天窗
     */
    openChat(row) {
      //TODO
      this.title = '车辆ID:' + row.carId
      this.currentCarId = row.carId
      this.dialogFormVisible = true

    },
    /**
     * 永久删除记录
     */
    async handleDelete(row) {
      //将该行的车辆ID传递到后端
      await this.$confirm(`此操作将会永久删除车辆${row.carId}的聊天记录`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '我再考虑考虑~',
        type: 'warning'
      }).then(async () => {
        let resp = await service.removeFeedBack(row.carId)
        if (resp.code === 500) {
          this.$modal.msgError(resp.msg)
          return
        }
        //刷新页面信息
        this.getList()
        this.$modal.msgSuccess(resp.msg)
      }).catch(() => {
        this.$modal.msg('已取消删除操作')
      });
    }
  }
}
</script>

<style scoped lang="scss">
.unread-badge {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 1000px;
  background-color: red;
  color: white;
  width: 30px;
  height: 30px;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 12px;
}

@media screen and (max-width: 800px) {
  ::v-deep .el-dialog {
    width: 94vw !important;
    height: 100vh;
    margin-top: 5px !important;

    .el-main {
      height: 65vh;
    }
  }
}
</style>
